<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑马考试4</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">


    <!--    1.将三个meta放在最前面
            2.导入相关配置文件
            3.顶部通栏
            4.导航栏
            5.轮播图-->
</head>
<body>
<!--3.顶部通栏-->
<header class="hidden-sm hidden-xs heima_topBar">
    <div class="container">
        <div class="row">
            <div class="col-md-2 heima_code">
                <span>黑马财富</span>
                <span class="glyphicon glyphicon-menu-down"></span>
                <img src="images/code.jpg">
            </div>
            <div class="col-md-5">
                <span>4006-618-9090(服务时间：9：00-21：00)</span>
            </div>
            <div class="col-md-2">
                <a href="#">常见问题</a>
                <a href="#">财富更换</a>
            </div>
            <div class="col-md-3">
                <a type="button" href="#" class="btn btn_register">免费注册</a>
                <a type="button" href="#" class="btn btn_login">登陆</a>
            </div>
        </div>
    </div>
</header>
<!--4.导航栏-->
<nav class="navbar navbar-default heima_nav">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button"
                    data-toggle="collapse" data-target="#example-collapse"
                    aria-expanded="false">
                <span class="sr-only">Hello World</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <img src="images/logo.png" class="navbar-brand">
        </div>
        <div class="collapse navbar-collapse" id="example-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">分类</a></li>
                <li><a href="#">推荐</a></li>
                <li><a href="#">新番</a></li>
                <li><a href="#">热文</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">个人中心</a></li>
            </ul>

        </div>
    </div>
    </div>
</nav>
<!--5.轮播图-->
<div class="slide carousel" id="slidershow" data-ride="carousel">
<!--    1.轮播图治时期-->
    <ol class="carousel-indicators">
        <li class="active" data-target="#slidershow" data-slide-to="0"></li>
        <li data-target="#slidershow" data-slide-to="1"></li>
        <li data-target="#slidershow" data-slide-to="2"></li>
        <li data-target="#slidershow" data-slide-to="3"></li>
    </ol>
<!--    2.轮播图图片-->
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/slide_01_2000x410.jpg" class="hidden-xs hidden-sm">
            <img src="images/slide_01_640x340.jpg" class="hidden-md hidden-lg">
        </div>
        <div class="item">
            <img src="images/slide_02_2000x410.jpg" class="hidden-xs hidden-sm">
            <img src="images/slide_02_640x340.jpg" class="hidden-md hidden-lg">
        </div>
        <div class="item">
            <img src="images/slide_03_2000x410.jpg" class="hidden-xs hidden-sm">
            <img src="images/slide_03_640x340.jpg" class="hidden-md hidden-lg">
        </div>
        <div class="item">
            <img src="images/slide_04_2000x410.jpg" class="hidden-xs hidden-sm">
            <img src="images/slide_04_640x340.jpg" class="hidden-md hidden-lg">
        </div>
    </div>
<!--    3.轮播图指示器-->
    <a class="carousel-control left"data-slide="prev" href="#slidershow" role="button">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right"data-slide="next" href="#slidershow" role="button">
        <span class="glyphicon glyphicon-chevron-next"></span>
    </a>
</div>
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>